<template>
    <div class="main">

        <Content>
            <template #content>
                <div class="b-w p-20-30 box" v-loading="state.loading">
                    <div class="box">
                        <div class="title">确认订单信息</div>
                        <div class="header">
                            <el-row class="text-center">
                                <el-col :span="8">
                                    <div class="tip">商品信息</div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="tip">商品属性</div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="tip">单价</div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="tip">数量</div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="tip">小记</div>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="list">
                            <el-row class="align-center row text-center" v-for="(item, index) in proList.productList"
                                :key="index">
                                <el-col :span="8">
                                    <div class="info dispaly-center">
                                        <img :src="item.img">
                                        <div class="name">{{ item.name }}</div>
                                    </div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="spec">{{ item.spName }}</div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="price">{{ item.price }}</div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="number">{{ item.number }}</div>
                                </el-col>
                                <el-col :span="4">
                                    <div class="money">{{ item.totalPrice }}</div>
                                </el-col>
                            </el-row>
                        </div>

                        <div class="desc">
                            <div class="d-title">祭祖信息</div>
                            <div class="detail dispaly-center">
                                <div class="img">
                                    <img :src="zInfo.img">
                                </div>
                                <div class="d-text dispaly-column-between">
                                    <div class="item">{{ zInfo.tName }}</div>
                                    <div class="item">{{ zInfo.name }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="submit ">
                            <div class="dispaly-column-between">
                                <div class="top dispaly-center">
                                    <span class="t">实付款：</span>
                                    <span class="d">¥</span>
                                    <span class="m">{{ proList.totalPrice }}</span>
                                </div>
                                <div class="bottom" @click="state.centerDialogVisible = true">
                                    <div class="btn dispaly-align-center">提交订单</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </template>
        </Content>
        <Pop />
        <el-dialog v-model="state.centerDialogVisible" width="190" center>
            <div class="dispaly-col-center">
                <div class="title">
                    请扫码支付
                </div>
                <div class="code">
                    <img :src="codeUrl">
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import QRCode from 'qrcode'
import { reactive, onMounted, ref, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { createOrder, requestOrder } from '@/api/index/index'
import { ElMessage } from "element-plus";

const state = reactive({
    queryData: {},
    centerDialogVisible: false,
    orderDetail: {},
    loading: true
})

const route = useRoute()
const getQuery = () => {
    if (route.query.data) state.queryData = JSON.parse(route.query.data)
}

// 创建订单
let codeUrl = ref('')
let datas = ref({})
const postCreateOrder = async () => {
    state.queryData.modelType = 0
    const res = await createOrder(state.queryData)
    if (res.code == 200) {
        codeUrl.value = await QRCode.toDataURL(res.data.payInfo)
        datas.value = res.data
        console.log(datas.value, 'code')
        state.loading = false
    }
    console.log(res, 'res')
}

// 轮询
const router = useRouter()
const timerId = ref(null);
const lOrder = async () => {
    const res = await requestOrder({ no: datas.value.orderNo, type: datas.value.type })
    if (res.code == 200) {
        if (res.data) {
            state.centerDialogVisible = false
            ElMessage({
                type: "success",
                message: "支付成功2秒后跳转",
            })
            setTimeout(() => {
                router.push({
                    path: '/home'
                })
            }, 2000)
        }
        console.log(res, 'ressssssssss----')
    }
}

let proList = ref([])
let zInfo = ref({})
onMounted(async () => {
    proList.value = JSON.parse(localStorage.getItem('orderPro'))
    zInfo.value = JSON.parse(localStorage.getItem('info'))
    getQuery()
    await postCreateOrder()
    timerId.value = setInterval(lOrder, 5000);
})

onUnmounted(() => {
    if (timerId.value) {
        clearInterval(timerId.value);
        timerId.value = null; // 可选，但有助于避免潜在的内存泄漏  
    }
})

</script>

<style lang="scss" scoped>
.btn {
    font-family: MicrosoftYaHei;
    font-size: 22px;
    color: #fff;
    background-color: $primary-color;
    width: 180px;
    height: 40px;
    border-radius: 5px;
    cursor: pointer;
}

.code {
    margin-top: 24px;
    margin-bottom: 26px;

    img {
        width: 138px;
        height: 138px;
    }
}

.main {
    .box {
        padding: 30px 100px;

        .title {
            font-family: MicrosoftYaHei;
            font-size: 16px;
            color: #111111;
            margin-bottom: 30px;
        }

        .header {
            border-bottom: 4px solid #EDE7DB;
            padding-bottom: 4px;

            .tip {
                font-family: MicrosoftYaHei;
                font-size: 12px;
                color: #777777;
            }
        }

        .list {
            margin-top: 30px;
            padding-bottom: 30px;
            border-bottom: 1px dashed #ccc;

            .row:last-child {
                margin-bottom: 0;
            }

            .row {
                margin-bottom: 24px;
            }

            .info {
                img {
                    margin-right: 10px;
                    width: 60px;
                    height: 60px;
                }

                .name {
                    font-family: MicrosoftYaHei;
                    font-size: 12px;
                    color: #333333;
                }
            }

            .spec,
            .number,
            .price {
                font-family: MicrosoftYaHei;
                font-size: 12px;
                color: #777777;
            }

            .money {
                color: $primary-color;
                font-family: MicrosoftYaHei, MicrosoftYaHei;
                font-weight: bold;
                font-size: 14px;
            }
        }

        .desc {
            padding: 20px 0 40px 0;
            border-bottom: 4px solid #EDE7DB;

            .d-title {
                font-family: MicrosoftYaHei;
                font-size: 14px;
                color: #111111;
                margin-bottom: 30px;
            }

            .detail {
                .img {
                    margin-right: 15px;
                    width: 60px;
                    height: 60px;

                    img {
                        width: 60px;
                        height: 60px;
                    }
                }

                .d-text {
                    height: 60px;

                    .item {
                        font-family: MicrosoftYaHei;
                        font-size: 14px;
                        color: #555555;
                    }
                }
            }
        }

        .submit {
            display: flex;
            justify-content: flex-end;

            .top {
                display: flex;
                justify-content: flex-end;
                margin: 40px 0 30px 0;

                .t {
                    font-family: MicrosoftYaHei;
                    font-size: 14px;
                    color: #555555;
                }

                .d {
                    font-family: MicrosoftYaHei;
                    font-size: 30px;
                    color: #999999;
                    margin: 0 11px;
                }

                .m {
                    font-family: MicrosoftYaHei, MicrosoftYaHei;
                    font-weight: bold;
                    font-size: 30px;
                    color: $primary-color;
                }
            }
        }
    }
}
</style>